<template>
  <div>
    <a-table :columns="columns" :data-source="list">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle">
        <a-icon type="smile-o" />Name
      </span>

      <span slot="action">
        <a @click="del(text)">Del</a>
      </span>
    </a-table>
    <!-- {{list}} -->
    <!-- <div v-for="(item, index) in list" :key="index">
    <span>  {{item.name}}</span>
    </div> -->
  </div>
</template>
<script>
const columns = [
  {
    dataIndex: "name",
    // key: "key",
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "name" }
  },
  {
    title: "Age",
    dataIndex: "age",
    // key: "key"
  },
  {
    title: "Address",
    dataIndex: "city",
    // key: "key"
  },

  {
    title: "Action",
    // key: "key",
    scopedSlots: { customRender: "action" }
  }
];

export default {
  data() {
    return {
      columns,
      list: []
    };
  },
  created() {
    this.$store.dispatch("getlist").then(() => {
      this.list = this.$store.state.data;
      console.log(this.list);
    });
  },
  methods: {
    del(text) {
      this.list.splice(text, 1)
    }
  }
};
</script>
